/*
Version 1.0

Suparerk@

make web side navigator Menu markup by data
- require jquery UI

sample data
{
    "data": [
		{ "id" : "a1", "caption" : "Menu 1", "link" : null, "icon" : null, "child" : [
			{ "id" : "a11", "caption" : "Menu 1.1", "link" :  null, "icon" : null, "child" : null },
			{ "id" : "a12", "caption" : "Menu 1.2", "link" :  null, "icon" : null, "child" : null },
			{ "id" : "a13", "caption" : "Menu 1.3", "link" :  null, "icon" : null, "child" : null }
		]},
		{ "id" : "a2", "caption" : "Menu 2", "link" : null, "icon" : null, "child" : null},
		{ "id" : "a3", "caption" : "Menu 3", "link" : null, "icon" : null, "child" : [
			{ "id" : "a31", "caption" : "Menu 3.1", "link" :  null, "icon" : null, "child" : null },
			{ "id" : "a32", "caption" : "Menu 3.2", "link" :  null, "icon" : null, "child" : null },
			{ "id" : "a33", "caption" : "Menu 3.3", "link" :  null, "icon" : null, "child" : null }
		]}
    ]
}
*/

(function($) {
	jQuery.fn.buildSideNavigate = function(settings) {
		var obj = this;
		var defaults = {
			dataURL: "sideNavidata.txt",
			loadTo:null , loadType:"iframe" //loadType = "iframe" , false
		}
	
		var options = jQuery.extend(defaults, settings);
		
		var holder = $(this);
		
		$.getJSON(options.dataURL, function(data) {
			var naviObj = data.data;
			
			holder.html('<ul class="rootNavi ui-state-default" style="list-style:none; margin:0px; padding:4px; text-align:left "/>')
			$(naviObj).each(function(i) {
            	if (naviObj[i].child != null) {
					//on top level
					holder.find("ul.rootNavi").append('<li class="naviHead ui-state-default ui-corner-all" style="padding:4px;margin-top:2px;margin-bottom:2px;cursor:pointer" id="navi'+naviObj[i].id.toString()+'">'+naviObj[i].caption.toString()+'</li>');
					//call Function to create all Child
					createChild(holder,naviObj[i]);
				}else{
					//on top level
					holder.find("ul.rootNavi").append('<li class="ui-state-default ui-corner-all" style="padding:4px;cursor:pointer" id="navi'+naviObj[i].id.toString()+'" link="'+naviObj[i].link+'">'+naviObj[i].caption.toString()+'</li>');
				}
			});
			//
			
/********* create all Child in obj *****************************************/
			function createChild(holder,obj){
				//alert(obj.caption);
			    holder.find("li#navi" + obj.id.toString()).after('<ul id="naviList' + obj.id.toString() + '" style="list-style:square; padding:2px;padding-left:20px;margin-left:0px;cursor:pointer"/>');
				
				$(obj.child).each(function(j) {//loop in child
					//create child list   
					holder.find("ul#naviList"+obj.id.toString()).append('<li class="ui-corner-all" style="padding:4px;cursor:pointer" id="navi'+obj.child[j].id.toString()+'" link="'+obj.child[j].link+'">'+obj.child[j].caption.toString()+'</li>');
					//s
					if(obj.child[j].child){// if have child
						createChild(holder,obj.child[j]);//do again
					};
				});
			};
/***************************************************************/			
			
			//event
			holder.find("li").hover(function() {
				$(this).addClass("ui-state-hover")
			}, function() {
				$(this).removeClass("ui-state-hover")
			});
			
			holder.find("li").not(".naviHead").click(function() {
				holder.find("ul.rootNavi li").removeClass("ui-state-active");
				$(this).addClass("ui-state-active");
				
				if (options.loadTo != null && $(this).attr("link") != 'null') {
					
					if(options.loadType == "iframe") {
						$(options.loadTo).html('<iframe src="'+$(this).attr("link")+'" frameborder="0" marginheight="0" marginwidth="0" height="100%" width="100%"></iframe>')
					}else{
						$(options.loadTo).load($(this).attr("link"));
					//alert("aa")
					}
					
				} else if ($(this).attr("link") != 'null'){
					window.location.href = $(this).attr("link");
				}
				
				return false;
			});
			
			holder.find("li.naviHead").toggle(function() {
				$(this).addClass("ui-state-highlight");
				$(this).next("ul").slideUp();
			},function() {
				$(this).removeClass("ui-state-highlight");
				$(this).next("ul").slideDown();
			});
			//end event
			
		});//end get 
	
    };

 		
})(jQuery);